<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router-2.7.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/account'>Account</router-link>
			<router-view></router-view>
		</div>
		
			<template id="tmpl">
				<div>
					<h1>这是 Account 组件</h1>
					<router-link to='/account/login'>登录</router-link>
					<router-link to='/account/register'>注册</router-link>
					<router-view></router-view>
				</div>
			</template>
		<script type="text/javascript">
			var account={
				template:"#tmpl"
			}
			
			var login={
				template:"<h3>登录</h3>"
			}  
			
			var register={
				template:"<h3>注册</h3>"
			}
			
			var router=new VueRouter({
				routes:[
					{
						path:'/account',
						component:account,
						
						children:[
							{path:'login',component:login},
							{path:'register',component:register}
						]
					},
										
				]
			})
			
			var vm= new Vue({
				el:"#app",
				router
			});
		</script>
	</body>
</html>
